<template>
	<view>
		<view class="billiards-box flexWrap">
			<block v-for="(item,index) in billiardsList" :key='index'>
				<view class="billiards-item flexWarpCenterColumn" @tap="goTable(item)" :class="{busy:item.status==2||item.status==99,repair:item.status==3}">
					<view class="billiards-info flexWarpCenterColumn">
						<view class="billiards-status">{{item.status==1?'闲':item.status==2||item.status==99?'忙':'停'}}</view>
						<view class="billiards-num">{{item.equipment_name}}</view>
					</view>
					<view class="billiards-btn">
						{{item.status==1?'去开台':item.status==2?'可预约：'+item.yuyue+' ':item.status==3?'维护中':'使用中'}}
					</view>
				</view>
			</block>
			<view class="empty-box" v-if="billiardsList.length==0">
				<image src="https://static.mo-yu.vip/wechat/images/orderEmpty.png"></image>
			</view>
			
			<!--操作指引悬浮按钮 -->
			<guideline :path="'pages/manage/tableList'"></guideline>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				billiardsList:[],
			};
		},
		onShow() {
			this.getTableList();
		},
		methods:{
			getTableList(){
				this.$request.post(this.$api.tableList, {
					store_id:uni.getStorageSync('store_id')
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					uni.hideToast();
					if (res.code==1) {
						this.billiardsList=data.equipment_list
					}
				})
			},
			goTable(item){
				if(item.status==3){
					this.$tools.showToast('当前桌正在维护中，请选择其他桌台');
					return;
				}
				if(item.status==99&&item.order_id>0){
					// this.$tools.showToast('当前桌正在使用中，请选择其他桌台');
					uni.navigateTo({
						url:"/pages/index/orderDetails?order_id="+item.order_id
					})
					return;
				}
				uni.navigateTo({
					url:"/pages/manage/billiardsDetails?equipment_id="+item.id
				})
			},
		}
	}
</script>

<style lang="scss">
	.billiards-box{
		margin-top: 40upx;
		flex-wrap: wrap;
		.billiards-item{
			width: 314upx;
			margin-bottom: 40upx;
			.billiards-info{
				width: 314upx;
				height: 216upx;
				justify-content: center;
				background: url(/static/index/idle.png) no-repeat center/100% 100%;
				.billiards-status{
					width: 40upx;
					height: 40upx;
					line-height: 40upx;
					text-align: center;
					background:#4FBE29;
					border-radius: 50%;
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
				.billiards-num{
					font-size: 36upx;
					font-family: PingFang SC;
					font-weight: bold;
					line-height: 50upx;
					color: #FFFFFF;
					text-shadow: 0px 2px 6upx rgba(0,0,0,0.65);
					margin-top: 10upx;
				}
			}
			.billiards-btn{
				height: 44upx;
				line-height: 44upx;
				min-width: 140upx;
				text-align: center;
				border: 2upx solid #7EE34A;
				border-radius: 42upx;
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #7EE34A;
			}
		}
		.busy{
			.billiards-info{
				background: url(/static/index/busy.png) no-repeat center/100% 100%;
				.billiards-status{
					background:#FF4726;
				}
			}
			.billiards-btn{
				padding: 0 20rpx;
				border: 2upx solid #FFB726;
				color: #FFB726;
			}
		}
		.repair{
			.billiards-info{
				background: url(/static/index/repair.png) no-repeat center/100% 100%;
				.billiards-status{
					background:#969696;
				}
			}
			.billiards-btn{
				width: 140upx;
				border: 2upx solid #969696;
				color: #969696;
			}
		}
	}
	.empty-box{
		width: 476upx;
		height: 280upx;
		margin:250upx auto;
	}
</style>
